// pages/learn/demo/dialog/dialog.js
// 1.wx自带弹窗提示 https://www.jb51.net/javascript/288171yx0.htm
// 2.自定义组件。

// const QRCode = require('qrcode')

Page({

  /**
   * 页面的初始数据
   */
  data: {
    isShowDialog2: false,
    isShowDialog3: false,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    this.dialog0 = this.selectComponent("#dialog0");
    this.dialog1 = this.selectComponent("#dialog1");
    console.log('onReady', this.dialog0)
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  dialog1() {
    wx.showToast({
      title: 'toast 内容', // 提示的内容
      duration: 5000, // 持续时长
      icon: 'loading', // 图表有success、error、loading、none四类
      mask: true // 显示透明蒙层，防止触摸穿透
    })
  },

  dialog2() {
    wx.showModal({
      title: '标题', // 弹窗标题
      content: '内容', // 弹窗内容
      complete: (res) => {
        // 弹窗选项按钮
        if (res.cancel) {
          console.log('用户点击了取消')
        } else if (res.confirm) {
          console.log('用户点击了确认')
        }
      }
    })
  },

  dialog3() {
    wx.showLoading({
      title: '加载中',
    })

    setTimeout(() => {
      wx.hideLoading()
    }, 2000);
  },

  dialog4() {
    wx.showActionSheet({
      itemList: ['选项1', '选项2', '选项3'],
      success: (res) => {
        switch (res.tapIndex) {
          case 0:
            wx.showToast({
              title: '点击了选项1',
            })
            break;
          case 1:
            wx.showToast({
              title: '点击了选项3',
            })
            break;
          case 2:
            wx.showToast({
              title: '点击了选项3',
            })
            break;
          default:
            console.log('other item')
        }
      },
      fail(res) {
        console.log('取消选择')
      }
    })
  },

  dialog5() {
    this.dialog0.show()
  },

  dialog6() {
    this.dialog1.show({
      title: "我的标题",
      zIndex: 2,
    }, this.myclose) // 自定义组件，事件回调方式2 传入回调
  },

  // // 自定义组件，事件回调方式3 slot槽位内事件
  close() {
    console.log('外部_close', this.dialog0, "-----", this.dialog1)
    this.dialog0.hide()
    this.dialog1.hide()
  },

  myclose() {
    console.log('myclose')
  },
  // 自定义组件，事件回调方式1 wxml绑定回调
  onMaskEvent() {
    console.log('myclose')
  },

  dialog7() {
    this.setData({
      isShowDialog2: true,
    })
  },

  onDialog2Click(e) {
    console.log('onDialog2Click ', e)
    this.setData({
      isShowDialog2: e.detail.isShow,
    })
  },

  // 页面中写弹窗组件
  dialog8() {
    this.setData({
      isShowDialog3: true,
    })

    // const {code} = e.currentTarget.dataset;
    let code = "1234567890"
    this.setData({
      qrCodeLink: code
    })
    this.createQrcode(code)
  },

  hideClick() {
    this.setData({
      isShowDialog3: false,
    })
  },

  // 生成二维码
  createQrcode(code) {
    var that = this;
    const query = wx.createSelectorQuery()
    query.select('#qrcode')
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        console.log('---->', res)
        var canvas = res[0].node

        // 调用方法drawQrcode生成二维码
        QRCode({
          canvas: canvas,
          canvasId: 'qrcode',
          // width:that.createRpx2px(300),
          // width: that.createRpx2px(300),
          // padding: 10,
          // background: '#ffffff',
          // foreground: '#000000',
          text: code
        })

        // 获取临时路径（得到之后，想干嘛就干嘛了）
        wx.canvasToTempFilePath({
          canvasId: 'qrcode',
          canvas: canvas,
          x: 0,
          y: 0,
          success(res) {
            // console.log('二维码临时路径：', res.tempFilePath)
            that.setData({
              qrcodePath: res.tempFilePath,
              // isShow: true
            })

            // console.log('二维码临时路径：', that.data.qrcodePath)
          },
          fail(res) {
            console.error(res)
          }
        })
      })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})